<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="dynamic-componet">
			<button v-for="e in tabs" v-bind:key="e"
			 v-bind:class="['tab-button',{active:currentTab === e}]"
			 v-on:click="currentTab=e"
			 >
				{{e}}
			</button>
			
			
			<!-- component 标签的 v-bind:is 的这个值可以动态的显示一个组件-->
			<component v-bind:is="currentTabComponent" class="tab"></component>
		</div>	
		<!-- 
		动态组件
		 -->
		<script type="text/javascript">
			
			Vue.component("tab-home",{
				template:'<div>Home component</div>'
			})
			Vue.component("tab-posts",{
				template:'<div>Posts component</div>'
			})
			Vue.component("tab-archive",{
				template:'<div>Archive component</div>'
			})
			
			let app=new Vue({
				el:'#dynamic-componet',
				data:{
					tabs:['home','posts','archive'],
					currentTab:'home',
				},
				computed:{
					currentTabComponent:function(){
						return "tab-"+this.currentTab;
					}
				}
			})
		</script>	
		<style type="text/css">
			 .tab-button {
			        padding: 6px 10px;
			        border-top-left-radius: 3px;
			        border-top-right-radius: 3px;
			        border: 1px solid #ccc;
			        cursor: pointer;
			        background: #f0f0f0;
			        margin-bottom: -1px;
			        margin-right: -1px;
			      }
			      .tab-button:hover {
			        background: #e0e0e0;
			      }
			      .tab-button.active {
			        background: #e0e0e0;
			      }
			      .tab {
			        border: 1px solid #ccc;
			        padding: 10px;
			      }
		</style>
	</body>
</html>
